import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import WindiCSS from 'vite-plugin-windicss';

import { resolve } from 'node:path';
import { createHtmlPlugin } from 'vite-plugin-html';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '');
  const {
    VITE_PORT,
    VITE_GLOB_APP_TITLE,
    VITE_PUBLIC_PATH,
    VITE_DROP_CONSOLE,
    VITE_GLOB_API_URL_PREFIX,
    VITE_GLOB_API_URL,
  } = env;
  const port = Number(VITE_PORT);
  return {
    base: VITE_PUBLIC_PATH,
    plugins: [
      vue(),
      vueJsx(),
      WindiCSS(),
      Components({
        resolvers: [AntDesignVueResolver()],
      }),
      // * 是否生成包预览(分析依赖包大小,方便做优化处理)
      // viteEnv.VITE_REPORT && visualizer(),
      createHtmlPlugin({
        inject: {
          data: {
            title: VITE_GLOB_APP_TITLE,
            // vuescript:'<script src="https://cdn.jsdelivr.net/npm/vue@3.2.37"></script>',
          },
        },
      }),
    ],
    resolve: {
      alias: {
        '@': resolve('./src'),
      },
    },
    css: {
      preprocessorOptions: {
        css: {
          // 全局添加scss
          // additionalData: `@import '~ant-design-vue/dist/antd.dark.css'`,
        },
      },
    },
    esbuild: {
      drop: VITE_DROP_CONSOLE == 'true' ? ['console', 'debugger'] : [],
    },
    build: {
      // 浏览器兼容性  “esnext | modules”
      target: 'modules',
      outDir: './dist',
      // 构建后是否生成 sourcemap 文件
      sourcemap: false,
      // 块大小警告大小限制(kb)
      chunkSizeWarningLimit: 2000,
      /** Vite 2.6.x 以上需要配置 minify: "terser", terserOptions 才能生效 */
      minify: 'terser',
      terserOptions: {
        format: {
          /** 删除注释 */
          comments: false,
        },
      },
      /** 打包后静态资源目录 */
      assetsDir: 'static',

      rollupOptions: {
        // 安装插件 npm install rollup-plugin-external-globals -D
        //  告诉打包工具 在external配置的 都是外部依赖项  不需要打包
        // external: ['vue'],
        // plugins: [
        //   // 避免打包和生产模式运行出错 在这里声明公共模块
        //   externalGlobals({
        //     //  "在项目中引入的变量名称" ："CDN包导出的名称，一般在CDN包中都是可见的"
        //     vue: 'Vue',
        //   }),
        // ],

        output: {
          // 分解大块js,
          manualChunks(id) {
            if (id.includes('node_modules')) {
              // const arr = id.toString().split('node_modules/')[1].split('/')[0];
              // switch (arr[0]) {
              //   case '@vue':
              //   case '@ant-design':
              //     return '_' + arr[0];
              //   default:
              //     return '__vendor';
              // }

              return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
          },
          // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
          entryFileNames: 'static/js/[name].[hash].js',
          // 用于命名代码拆分时创建的共享块的输出命名
          chunkFileNames: 'static/js/[name].[hash].js',
          // 用于输出静态资源的命名，[ext]表示文件扩展名
          assetFileNames: 'static/[ext]/[name].[hash].[ext]',
        },
      },
    },

    server: {
      port: port,
      hmr: true,
      proxy: {
        VITE_GLOB_API_URL_PREFIX: {
          target: VITE_GLOB_API_URL,
          ws: false,
          changeOrigin: true,
          rewrite: (path) => path.replace(`^\/${VITE_GLOB_API_URL_PREFIX}`, ''),
        },
      },
    },
  };
});
